<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.hide{
				display: none;
			}
		</style>
		<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		var objs=[];
		
			$(function(){
				$.ajax({
					url:"data.json",
					type:"get",
					async:false,
					dataType:"JSON",
					success:function(data){
						objs=data;
					init();
					}
				})

			})
			function init(){
				for (let i = 0; i < objs.length; i++) {
					var tr=$("<tr></tr>");
					tr.append(createTd(objs[i].id))
					tr.append(createTd(objs[i].name))
					tr.append(createTd(objs[i].dynasty))
					tr.append(createTd(objs[i].author))
					var td=$("<td></td>");
					td.append($("<button class='btn-edit'>编辑</button>"))
					td.append($("<button class='btn-del'>删除</button>"))
					td.append($("<button class='btn-save'>保存</button>"))
					td.append($("<button class='btn-cel'>取消</button>"))
					tr.append(td)
					$(".con").append(tr)
					$(".btn-save").addClass("hide");
					$(".btn-cel").addClass("hide");
				}
				$("input").attr("disabled","disabled");
			}
			function createTd(i){
				var td=$("<td></td>");
				var input=$("<input type='text' size='8'/>");
				if(i){
					input.val(i);
				}
				td.append(input);
				return td;
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>朝代</th>
				<th>作者</th>
				<th>操作</th>
			</tr>
			<tbody class="con">
				
			</tbody>
			<tr>
				<td colspan="5" align="center"><button class='btn-add' onclick="add()">增加</button></td>
			</tr>
		</table>
		<script type="text/javascript">
			function add(){
				$(".btn-add").addClass("hide");
				var tr=$("<tr></tr>");
				tr.append(createTd())
				tr.append(createTd())
				tr.append(createTd())
				tr.append(createTd())
				var td=$("<td></td>");
				
				
				td.append($("<button class='btn-save'>保存</button>"))
				td.append($("<button class='btn-cel'>取消</button>"))
				tr.append(td)
				$(".con").append(tr)
				$(".btn-cel").bind("click",cel)
				
			}
			function cel(){
				if(confirm("是否要取消编辑？")){
					$(".con").html("")
					init()
					$(".btn-add").removeClass("hide");
				}
			}
		</script>
	</body>
</html>
